payment memos

5 files changed, 108 insertions, 9 deletions

diff --git a/src/routes/(app)/[username]/invoice/[id]/+layout.server.js b/src/routes/(app)/[username]/invoice/[id]/+layout.server.js
index 6f9ae4a2..0df10cca 100644
--- a/src/routes/(app)/[username]/invoice/[id]/+layout.server.js
+++ b/src/routes/(app)/[username]/invoice/[id]/+layout.server.js
@@ -13,7 +13,7 @@ export async function load({ depends, params, url, parent }) {
   if (
     user &&
     invoice.uid !== user.id &&
-    !url.pathname.includes("tip") &&
+    !(url.pathname.includes("tip") || url.pathname.includes("memo")) &&
     !options
   ) {
     redirect(307, `/send/invoice/${id}`);
diff --git a/src/routes/(app)/[username]/invoice/[id]/+page.svelte b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
index 56feced6..a7ffbff3 100644
--- a/src/routes/(app)/[username]/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
@@ -42,12 +42,12 @@
     amount,
     hash,
     type,
+    memoPrompt,
     rate,
     received,
     prompt,
     text,
     tip,
-    request_id,
     user: { username, currency },
   } = invoice;
 
@@ -144,15 +144,15 @@
   {/if}
 
   {#each invoice.items as i}
-    <div class="grid grid-cols-4 text-xl">
-      <div class="mr-auto grow col-span-2">
-        <span class="mr-2">{i.quantity}</span>
+    <div class="grid grid-cols-12 text-xl">
+      <div class="col-span-1 my-auto">{i.quantity}</div>
+      <div class="mr-auto grow col-span-7 my-auto">
         {i.name}
       </div>
-      <div class="font-semibold text-right">
+      <div class="col-span-2 font-semibold text-right my-auto">
         {f(i.price * i.quantity, currency)}
       </div>
-      <div class="text-secondary text-right text-lg my-auto">
+      <div class="col-span-2 text-secondary text-right text-lg my-auto">
         {sat(btc(i.price * i.quantity, rate))}
       </div>
     </div>
diff --git a/src/routes/(app)/[username]/invoice/[id]/memo/+page.server.js b/src/routes/(app)/[username]/invoice/[id]/memo/+page.server.js
new file mode 100644
index 00000000..b81e2364
--- /dev/null
+++ b/src/routes/(app)/[username]/invoice/[id]/memo/+page.server.js
@@ -0,0 +1,12 @@
+import invoice from "$lib/invoice";
+import { redirect } from "@sveltejs/kit";
+
+export async function load({ parent, params }) {
+  let { invoice } = await parent();
+  if (!invoice.amount)
+    redirect(307, `/${params.username}/invoice/${invoice.id}`);
+}
+
+export const actions = {
+  default: invoice,
+};
diff --git a/src/routes/(app)/[username]/invoice/[id]/memo/+page.svelte b/src/routes/(app)/[username]/invoice/[id]/memo/+page.svelte
new file mode 100644
index 00000000..a64ed453
--- /dev/null
+++ b/src/routes/(app)/[username]/invoice/[id]/memo/+page.svelte
@@ -0,0 +1,88 @@
+<script>
+  import { onMount } from "svelte";
+  import { browser } from "$app/environment";
+  import { invoice as inv, request } from "$lib/store";
+  import { copy, select, f, sat, get, reverseFormat, s, sats } from "$lib/utils";
+  import Icon from "$comp/Icon.svelte";
+  import { goto } from "$app/navigation";
+  import { t } from "$lib/translations";
+  import { enhance } from "$app/forms";
+  import { tick } from "svelte";
+
+  let submitting;
+  let submit;
+
+  export let data;
+  $: refresh(data);
+  let { invoice, id, user, rates } = data;
+  let {
+    amount,
+    hash,
+    items,
+    memoPrompt,
+    type,
+    rate,
+    received,
+    prompt,
+    text,
+    tip,
+    user: { username, currency },
+  } = invoice;
+
+  invoice.memo = user?.username;
+
+  let refresh = (data) => {
+    $inv = null;
+
+    ({ invoice, id } = data);
+    ({
+      amount,
+      hash,
+      items,
+      memoPrompt,
+      type,
+      received,
+      prompt,
+      text,
+      tip,
+      user: { username },
+    } = invoice);
+  };
+</script>
+
+<form
+  method="POST"
+  use:enhance
+  class:invisible={submitting}
+  class="container px-4 max-w-lg mx-auto space-y-5"
+>
+  <input type="hidden" name="amount" value={amount} />
+  <input type="hidden" name="tip" value={tip} />
+  <input type="hidden" name="username" value={username} />
+  <input type="hidden" name="rate" value={invoice.rate} />
+  <input type="hidden" name="memoPrompt" value={invoice.memoPrompt} />
+  <input type="hidden" name="prompt" value={invoice.prompt} />
+  <input type="hidden" name="type" value={type} />
+  <input type="hidden" name="hash" value={hash} />
+  <input type="hidden" name="items" value={JSON.stringify(items)} />
+
+  <h1 class="text-4xl font-semibold text-center">{$t("invoice.addMemo")}</h1>
+  <div class="space-y-2">
+    <input
+       use:select
+      name="memo"
+      class="w-full p-4 border rounded-xl text-xl"
+      bind:value={invoice.memo}
+      autocapitalize="none"
+    />
+    <div class="text-secondary">{invoice.memoPrompt}</div>
+  </div>
+
+  <button
+    type="submit"
+    bind:this={submit}
+    class="bg-black text-white border rounded-2xl px-6 py-5 w-full font-bold"
+  >
+    {$t("payments.next")}
+  </button>
+</form>
diff --git a/src/routes/(app)/[username]/invoice/[id]/tip/+page.svelte b/src/routes/(app)/[username]/invoice/[id]/tip/+page.svelte
index e9472118..ec35c3fb 100644
--- a/src/routes/(app)/[username]/invoice/[id]/tip/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[id]/tip/+page.svelte
@@ -115,13 +115,12 @@
     <input type="hidden" name="tip" value={tip} />
     <input type="hidden" name="username" value={username} />
     <input type="hidden" name="rate" value={invoice.rate} />
+    <input type="hidden" name="memoPrompt" value={invoice.memoPrompt} />
     <input type="hidden" name="prompt" value="false" />
     <input type="hidden" name="type" value={type} />
     <input type="hidden" name="hash" value={hash} />
     <input type="hidden" name="items" value={JSON.stringify(items)} />
 
-    <input type="hidden" name="request_id" value={invoice.request?.id} />
-
     <h1 class="text-4xl font-semibold my-8">{$t("invoice.addTipq")}</h1>
     {#if !showCustomAmount}
       <div class="my-2 text-xl">{Math.round(tipPercent)}%</div>